<template>
  <div class="logincontent">
    <div class="login-box">
      <h2>安仔健身后台管理系统</h2>
      <el-form ref="loginFormRef" :model="loginForm" :rules="rules" status-icon label-width="auto">
        <el-form-item prop="adminAccount" class="input">
          <el-input v-model="loginForm.adminAccount" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item prop="password" class="input">
          <el-input v-model="loginForm.password" type="password" placeholder="请输入密码" />
        </el-form-item>
        <!-- <div class="rpwd">忘记密码?</div> -->
        <a>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <el-button type="text" @click="submitForm(loginFormRef)">L o g i n</el-button>
        </a>
      </el-form>
    </div>
  </div>
</template>
<script lang="ts">
import { ref, reactive, toRefs } from "vue";
import type { FormInstance } from "element-plus";
import { useRouter } from "vue-router";
import { loginData } from ".././type/login";
// import { login } from "../request/api";
import { login } from "../http/api";
import { ElMessage } from "element-plus";
export default {
  setup() {
    const data = reactive(new loginData());
    const rules = {
      adminAccount: [
        { required: true, message: "请输入用户名", trigger: "blur" },
        { min: 6, max: 18, message: "用户名长度为6-个字符", trigger: "blur" },
      ],
      password: [
        { required: true, message: "请输入密码", trigger: "blur" },
        { min: 6, max: 18, message: "密码长度为6-18个字符", trigger: "blur" },
      ],
    };
    //登录
    const loginFormRef = ref<FormInstance>();
    const router = useRouter(); //--$router
    const submitForm = (formEl: FormInstance | undefined) => {
      if (!formEl) return;
      //对表单的内容进行验证
      //valid 是一个布尔类型，true：成功，false：反之
      // console.log(data.loginForm.password);

      formEl.validate((valid) => {
        if (valid) {
          login(data.loginForm).then((res: any) => {
            console.log(res);
            if (res.code == 0) {
              ElMessage({
                message: "登录成功",
                type: "success",
              });

              localStorage.setItem("token", res.data);
              //解析token
              let Base64 = {
                decode(str) {
                  return decodeURIComponent(
                    atob(str)
                      .split("")
                      .map(function (c) {
                        return (
                          "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2)
                        );
                      })
                      .join("")
                  );
                },
              };
              let token = res.data;
              // 请求接口拿到后端返回的token
              //通过base64 转格式后转换为json 对象
              let adminAccountInfo = JSON.parse(
                Base64.decode(token.split(".")[1])
              );
              //存入localStorage 时 要转化为json 字符串
              localStorage.setItem(
                "adminAccountInfo",
                JSON.stringify(adminAccountInfo)
              );
              // console.log(adminAccountInfo);
              router.push("/mainView");

            } else {
              ElMessage({
                message: res.msg,
                type: "warning",
              });
            }
          });
        } else {
          console.log("error submit!");
          return false;
        }
      });
      // console.log(formEl);
    };

    const resetForm = (formEl: FormInstance | undefined) => {
      if (!formEl) return;
      formEl.resetFields();
    };

    return {
      ...toRefs(data),
      rules,
      loginFormRef,
      submitForm,
      router,
      resetForm,
    };
  },
};
</script>
<style scoped>
.logincontent {
  background: linear-gradient(#141e30, #243b55);
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;
}

.login-box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  padding: 40px;
  transform: translate(-50%, -50%);
  background: #0c141e;
  box-sizing: border-box;
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.6);
  border-radius: 10px;
}

.login-box h2 {
  margin: 0 0 30px;
  padding: 0;
  color: #fff;
  text-align: center;
}

.login-box .user-box {
  position: relative;
}

.el-input {
  border: none !important;
}

/* // 改变input框背景颜色 */
/deep/.el-input__inner {
  background-color: transparent !important;
  border: none !important;
}

/deep/.el-input__wrapper {
  background-color: transparent !important;
  border: solid 1px #03e9f4 !important;
}

/* .el-input:focus~label,
.el-input:valid~label {
  top: -20px;
  left: 0;
  color: #03e9f4;
  font-size: 12px;
} */

.login-box form a {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  color: #03e9f4;
  font-size: 16px;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  transition: 0.5s;
  margin-left: 110px;
  margin-top: 50px;
  letter-spacing: 4px;
}

.login-box a:hover {
  background: #03e9f4;
  color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4,
    0 0 100px #03e9f4;
}

.login-box a span {
  position: absolute;
  display: block;
}

.login-box a span:nth-child(1) {
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #03e9f4);
  animation: btn-anim1 1s linear infinite;
}

@keyframes btn-anim1 {
  0% {
    left: -100%;
  }

  50%,
  100% {
    left: 100%;
  }
}

.login-box a span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #03e9f4);
  animation: btn-anim2 1s linear infinite;
  animation-delay: 0.25s;
}

@keyframes btn-anim2 {
  0% {
    top: -100%;
  }

  50%,
  100% {
    top: 100%;
  }
}

.login-box a span:nth-child(3) {
  bottom: 0;
  right: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg, transparent, #03e9f4);
  animation: btn-anim3 1s linear infinite;
  animation-delay: 0.5s;
}

@keyframes btn-anim3 {
  0% {
    right: -100%;
  }

  50%,
  100% {
    right: 100%;
  }
}

.login-box a span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(360deg, transparent, #03e9f4);
  animation: btn-anim4 1s linear infinite;
  animation-delay: 0.75s;
}

@keyframes btn-anim4 {
  0% {
    bottom: -100%;
  }

  50%,
  100% {
    bottom: 100%;
  }
}
</style>
